<div ng-controller="ProgressDemoCtrl" class="well">
    <h2>Static</h2>
    <div class="row-fluid">
        <div class="span4"><progress value="55"></progress></div>
        <div class="span4"><progress value="22" class="progress-warning progress-striped"></progress></div>
        <div class="span4"><progress value="88" class="progress-danger progress-striped active"></div>
    </div>
    
    <h2>Dynamic <button class="btn btn-primary" type="button" ng-click="random()">Randomize</button></h2>
    <pre>Value: {{dynamic}}</pre>
    <progress value="dynamic"></progress>
    
    <small><em>No animation</em></small>
    <progress value="dynamic" class="progress-success" animate="false"></progress>

    <small><em>Object (changes type based on value)</em></small>
    <progress value="dynamicObject" class="progress-striped active"></progress>
    
    <h2>Stacked <button class="btn btn-primary" type="button" ng-click="randomStacked()">Randomize</button></h2>
    <small><em>Array values with automatic types</em></small>
    <pre>Value: {{stackedArray}}</pre>
    <progress value="stackedArray" auto-type="true"></progress>
    
    <small><em>Objects</em></small>
    <pre>Value: {{stacked}}</pre>
    <progress value="stacked"></progress>
</div>